<template>
    <div class="h-full flex-col">
        <SearchForm @handle-reset="resetParams" @handle-search="getList">
            <el-form :model="searchForm" inline>
                <el-form-item>
                    <el-input v-model="searchForm.subject" clearable @change="getList" class="w-220px"
                        placeholder="商品名称" />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.func_name" placeholder="服务功能" clearable @change="getList"
                        class="w-220px">
                        <el-option label="短信充值" value="smsBuy" />
                        <el-option label="AI" value="AI" />
                    </el-select>

                </el-form-item>
                <!-- <el-form-item>
                    <el-select v-model="searchForm.isProxy" placeholder="是否存在代理" clearable @change="getList"
                        class="w-220px">
                        <el-option label="否" :value="0" />
                        <el-option label="是" :value="1" />
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-select v-model="searchForm.status" placeholder="订单状态" clearable @change="getList"
                        class="w-220px">
                        <el-option label="未支付" :value="0" />
                        <el-option label="已支付" :value="1" />
                        <el-option label="已退款" :value="2" />
                        <el-option label="已关闭" :value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="times" type="daterange" unlink-panels range-separator="-"
                        start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" @change="gerTimeData" />
                </el-form-item>
            </el-form>
        </SearchForm>
        <div class="page-card h-full" v-loading="loading">
            <el-table :data="tableData">
                <el-table-column label="ID" prop="_id" align="center" />
                <el-table-column label="商品名称" prop="subject" align="center" />
                <el-table-column label="支付时间" align="left">
                    <template #default="{ row }">
                        <p>{{ moment(row.gmt_payment).format('YYYY-MM-DD HH:mm:ss') }}</p>
                    </template>
                </el-table-column>

                <el-table-column label="服务功能" align="left">
                    <template #default="{ row }">
                        {{ row.func_name == 'smsBuy' ? '短信充值' : 'AI' }}
                    </template>
                </el-table-column>


                <el-table-column label="订单状态" prop="isRefund" align="center">
                    <template #default="{ row }">
                        {{ row.status == '0' ? '未支付' : row.status == '1' ? '已支付' : row.status == '2' ? '已退款' : '已关闭' }}
                    </template>
                </el-table-column>

                <el-table-column label="支付金额" prop="total_amount" align="center">
                    <template #default="{ row }">
                        {{ row.total_amount }} 元
                    </template>
                </el-table-column>

                <!-- <el-table-column label="支付方式" prop="pay_type" align="center">
                    <template #default="{ row }">
                        {{ row.pay_type == 'alipay' ? '支付宝' : row.pay_type == 'wechat' ? '微信' : '其他'

                        }}
                    </template>
                </el-table-column> -->

                <el-table-column label="创建时间" prop="createTime" align="center" />
            </el-table>
            <Pagination :pageable="page" :handleSizeChange="handleSizeChange"
                :handleCurrentChange="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { alipayOrderList } from '@/api/orders';
// import { useRouter } from 'vue-router';
import moment from 'moment';
import { shortcuts } from '@/utils/shearData'
const times = ref([]);

const gerTimeData = (val: any) => {
    if (val) {
        searchForm.start_time = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00';
        searchForm.end_time = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59';

    } else {
        searchForm.start_time = '';
        searchForm.end_time = '';
    }
};
// const router = useRouter();

// const buyState = [
//   {
//     label: '未订购',
//     value: 0
//   },
//   {
//     label: '订购付费',
//     value: 1
//   },
//   {
//     label: '订购试用',
//     value: 2
//   },
//   {
//     label: '订购过期',
//     value: 3
//   },
//   {
//     label: '已退款',
//     value: 4
//   }
// ];

// const getBuyLabel = (val: number) => {
//   return buyState.find((item) => item.value === val)?.label;
// };

// const returnVisit = (row: any) => {
//   console.log(row);
// };

const searchForm = reactive({
    status: '',
    func_name: '',
    subject: '',
    start_time: '',
    end_time: ''
});
const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
    useTable({
        apiFn: alipayOrderList,
        params: searchForm
    });
console.log(tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange);
// const gotolinkpage = (row: any) => {
//     console.log(row);
//     router.push({
//         path: '/promotion/link',
//         query: {
//             id: row._id
//         }
//     });
// };
// const gotoadminuserpage = (row: any) => {
//     console.log(row);
//     router.push({
//         path: '/subaccount/agents',
//         query: {
//             id: row._id
//         }
//     });
// };
</script>

<style lang="scss" scoped></style>
